<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
</head>

<body>
    <p>模板引擎</p>
    <div id="tpl">
        
    </div>
</body>
<script>
    // 配置
    layui.config({
        base: "../model/",
        version: true
    })
    // 模板引擎
    layui.use(["jmTpl", "jquery"], function () {
        var jmTpl = layui.jmTpl;
        var $ = layui.$

        var html = `
        <p>{title}</p>
        <br>----------if-------------<br>
        {#if isTrue}
            <p>It's true!</p>
        {/if}
        <br>--------if-else-----------------<br>
        {#if gender === 'male'}
            <p>Gender is male</p>
        {:else}
            <p>Gender is female</p>
        {/if}
        <br>--------if-elseif-----------------<br>
        {#if gender === 'male'}
            <p>Gender is male</p>
        {:else if gender === 'female'}
            <p>Gender is female</p>
        {/if}
        <br>--------if-elseif-elseif-else--------------<br>
        {#if gender === 'male'}
            <p>Gender is male</p>
        {:else if gender === 'female'}
            <p>Gender is female</p>
        {:else if gender === 'kllxs'}
        <p>Gender is kllxs</p>
        {:else}
        <p>都不是</p>
        {/if}
        <br>--------each--------------<br>
        {#each users as v,k}
            <p>key：{k}，姓名：{v.name}</p>
        {/each}
        <br>--------each-if-------------<br>
        <div>
            <div>
                {#each users as v,k}
                    {#if v.name === '小陈'}
                        <p>key：{k}，姓名：{v.name}</p>
                    {/if}
                {/each}
            </div>
        </div>
        <br>--------each-if-------------<br>
        <div>
            <div>
                {#if gender === 'male'}
                {#each users as v,k}
                    <p>key：{k}，姓名：{v.name}</p>
                    <span>asd</span>
                {/each}
                {/if}
            </div>
        </div>
        <br>--------for-------------<br>
        {#for var i=0;i<10;i++}
        <p>for:{i}</p>
        {/for}
        <br>--------html-------------<br>
        <div>{@html dynamicHTML}</div>
        <div>{dynamicHTML}</div>
        `;
        console.time('模板渲染耗时');
        var tpl = jmTpl(html, {
            title: 'Hello, JinMin!',
            isTrue: true,
            gender: 'male',
            users: [
                { name: '小陈' },
                { name: '小李' },
                { name: '王刚' }
            ],
            dynamicHTML: '<strong>Dynamic HTML</strong>'
        });
        // console.log(tpl)
        console.timeEnd('模板渲染耗时');
        $("#tpl").html(tpl);
    })


</script>

</html>